<template>
  <PopupWindow :id="id" :title="title" :headerBgColor="headerBgColor">
    <div class="info-box">
      <div class="info-content">
        <div class="left-icon">
          <jc-icon name="logger-fatal" />
        </div>
        <div class="right-paragraph">
          {{ msg }}
        </div>
      </div>

      <div class="bt-group">
        <button v-for="(bt, index) in buttons" :key="index" :class="`${bt.class}-bt`">
          <span>{{ bt.msg }}</span>
          <span>{{ bt.msg }}</span>
        </button>
      </div>
    </div>
  </PopupWindow>
</template>

<script lang="ts" setup>
import PopupWindow from '../PopupWithToolsbar.vue'

const props = withDefaults(
  defineProps<{
    id: string
    width?: string
    height?: string
    headerBgColor?: string
    title?: {
      text: string
      color: string
    }
    msg?: string
    buttons?: {
      msg: string
      class: 'info' | 'primary' | 'success' | 'warn' | 'danger' | 'fatal'
      action: Function
    }[]
  }>(),
  {
    width: '389px',
    height: '180px',
    headerBgColor: '#9D02A2',
    title: () => {
      return {
        text: 'Fatal',
        class: 'primary',
        color: '#ffffff'
      }
    },
    msg: 'Logger For JCAdmin: Fatal Informations',
    buttons: () => {
      return [
        { msg: 'Bt1', class: 'primary', action: () => {} },
        { msg: 'Bt2', class: 'fatal', action: () => {} }
      ]
    }
  }
)
</script>

<style lang="scss" scoped>
@import url(./logger.scss);
</style>
